import React, { PureComponent } from 'react';
import { connect } from 'dva';
import { Link } from 'dva/router'
import { Card, Button, Icon, List, Popconfirm } from 'antd';

import PageHeaderLayout from '@/layouts/PageHeaderLayout';

import styles from './AppList.less';
import iconDefalut from '@/assets/icon_default.png';
//权限
import { checks } from '@/utils/authority';

@connect(state => ({
  app: state.app
}))
export default class AppList extends PureComponent {

  componentDidMount() {

    this.props.dispatch({
      type: 'app/dataList'
    });
  }

  /**
   * 列表删除函数
   * payload: 删除项id
   * delete: 删除方法
   * */
  handleDelete(id) {
    const {dispatch} = this.props;
    dispatch({
      type: 'app/delete',
      payload: id
    });
  }
  /**
   * 取消删除
   * */
  cancel(){
    message.error('您取消了删除!');
  }

  render() {

    const { app } = this.props;
    const { dataList, loading } = app;

    const content = (
      <div className={styles.pageHeaderContent}>
        <p>
          说明：你可以维护你拥有权限功能的应用程序。
        </p>
        <div className={styles.contentLink}>

        </div>
      </div>
    );

    const extraContent = (
      <div className={styles.extraImg}>
        <img alt="这是一个标题" src="https://gw.alipayobjects.com/zos/rmsportal/RzwpdLnhmvDJToTdfDPe.png" />
      </div>
    );

    return (
      <PageHeaderLayout
        title="应用列表"
        content={content}
        extraContent={extraContent}
      >
        <div className={styles.appList}>
          <List
            rowKey="id"
            loading={loading}
            grid={{ gutter: 24, lg: 3, md: 2, sm: 1, xs: 1 }}
            dataSource={['', ...dataList]}
            renderItem={(item) => {
            var actions = [];
            if (checks("/admin/app/update")){
              actions.push(
                <Link to={{pathname: "/permissions/appEdit", search: '?id=' + item.id}}>编辑</Link>
              )
            }
            if (checks("/admin/app/del")){
              actions.push(
                <Popconfirm key="delete" title="你确定要删除吗?" onConfirm={this.handleDelete.bind(this, item.id)} onCancel={this.cancel.bind(this)}><a>删除</a></Popconfirm>
              )
            }
            return (item ? (
              <List.Item key={item.id}>
                <Card hoverable className={styles.card} actions={actions}>
                  <Card.Meta
                    avatar={<img alt="" className={styles.cardAvatar} src={(item.icon==null||item.icon==''||item.icon==undefault)?iconDefalut:item.icon} />}
                    title={<p>{item.name}</p>}
                    description={(
                      <p className={styles.cardDescription}>
                        <span>{item.code}</span>
                      </p>
                    )}
                  />
                </Card>
              </List.Item>
              ) : (
                checks('/admin/app/add') ?
                <List.Item>
                  <Link to="/permissions/appAdd">
                    <Button type="dashed" className={styles.newButton}>
                      <Icon type="plus" /> 新增应用
                    </Button>
                  </Link>
                </List.Item>
                :
                <div></div>
              )
            )
            }}
          />
        </div>
      </PageHeaderLayout>
    );
  }
}
